<template>
	<view class="login">
		<view class="head">
			<image src="../../static/logo.png"></image>
			<view class="text">轩聊</view>
		</view>
		<view class="body">
			<view class="form">
				<view class="account">
					<image :src="avater" v-show="avater != ''"></image>
					<input class="i_put" type="number" v-model="account" maxlength="11" placeholder="请输入你的轩聊号"
						@input="AccountInput" />
					<view v-show="InfoList.length>1">
						<uni-icons type="down" size="20" v-show="!show" @click="show=true"></uni-icons>
						<uni-icons type="up" size="20" v-show="show" @click="show=false"></uni-icons>
					</view>
				</view>
				<scroll-view class="xuan" scroll-y="true" v-show="show">
					<view class="x_item" v-for="(item,i) in InfoList" :key="i">
						<image :src="item.avatar"></image>
						<text>{{item.account}}</text>
						<uni-icons type="closeempty" size="20" class="x_icon" @click="deleteInfo(i)"></uni-icons>
					</view>
				</scroll-view>
				<view class="pwd">
					<input class="i_put" :type="pwdType" v-model="pwd" maxlength="15" placeholder="请输入密码"
						@input="handleInput" />
					<uni-icons type="eye-slash" size="30" v-show="!seeing" class="icon"
						@click="updatePwdType"></uni-icons>
					<uni-icons type="eye" size="30" v-show="seeing" class="icon" @click="updatePwdType"></uni-icons>
				</view>
			</view>
			<view class="button" @click="login">
				<view class="back"></view>
				<uni-icons type="arrow-right" size="30" class="icon"></uni-icons>
			</view>
		</view>
		<view class="botom">
			<view @click="NavigatorPwd">忘记密码</view>
			<view @click="NavigatorRegister">新用户注册</view>
			<view>扫码登录</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
	} from 'vuex'
	import {
		login,
		getAvatar
	} from '../../common/api';
	export default {
		computed: {
			...mapState('info', ['InfoList'])
		},
		data() {
			return {
				seeing: false,
				pwdType: 'password',
				account: '',
				pwd: '',
				avater: '',
				show:false,
			};
		},
		created() {
			if (this.InfoList.length != 0) {
				let data = this.InfoList[0]
				this.account = data.account;
				this.pwd = data.password;
			}
			if (this.account.length == 11) {
				getAvatar({
					account: this.account
				}).then((res) => {
					if (res.code = 200) {
						this.avater = res.data
					}
				})
			} else {
				this.avater = '';
			}
		},
		methods: {
			...mapMutations('info', ['CreateMyInfo','deleteInfoList']),
			NavigatorRegister() {
				uni.navigateTo({
					url: '/subpkg/register/register'
				})
			},
			NavigatorPwd(){
				uni.navigateTo({
					url: '/subpkg/setPwd/setPwd'
				})
			},
			deleteInfo(i){
				this.deleteInfoList(i)
				this.show = false;
			},
			updatePwdType() {
				this.seeing = !this.seeing;
				this.pwdType = (this.pwdType == 'password') ? 'text' : 'password';
			},
			handleInput(event) {
				const value = event.detail.value.replace(/[\u4e00-\u9fa5]/g, '');
				this.pwd = value;
			},
			AccountInput(e) {
				if (this.account.length == 11) {
					getAvatar({
						account: e.detail.value
					}).then((res) => {
						if (res.code = 200) {
							this.avater = res.data
						}
					})
				} else {
					this.avater = '';
				}
			},
			login() {
				if (this.account.length < 11) {
					uni.showToast({
						title: '账号不足11位',
						duration: 1000,
						icon: 'error'
					});
					return;
				}
				login({
					account: this.account,
					password: this.pwd
				}).then((res) => {
					let resData = res.data;
					if (res.code == 200) {
						uni.setStorageSync('token', res.token);
						// resData.password = this.pwd;
						this.CreateMyInfo(resData);
						setTimeout(() => {
							uni.showToast({
								title: '登录成功',
								duration: 2000
							})
							uni.switchTab({
								url: '/pages/message/message'
							})
						}, 2000);
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error",
							duration: 2000,
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.login {
		width: 750rpx;
		height: 100vh;

		.head {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			top: 150rpx;
			left: 0;
			right: 0;

			image {
				width: 120rpx;
				height: 120rpx;
				padding: 0 20rpx;
			}

			.text {
				font-size: 70rpx;
				letter-spacing: 10rpx;
			}
		}

		.body {
			position: fixed;
			top: 350rpx;
			right: 0;
			left: 0;
			height: 600rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.form {
				width: 750rpx;
				height: 350rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				
				.xuan{
					width: 620rpx;
					height: 450rpx;
					position: absolute;
					top: 70rpx;
					z-index: 10;
					background-color: #ededed;
					transform: translateY(100rpx);
					transition: transform 0.3s;
					.x_item{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20rpx;
						border-bottom: 1rpx solid #919191;
						width: 650rpx;
						&:active{
							background-color: #c0c0c0;
						}
						image{
							width: 100rpx;
							height: 100rpx;
							border-radius: 50rpx;
						}
						text{
							width: 200rpx;
							font-size: 35rpx;
							padding-left: 20rpx;
						}
					}
				}

				%base {
					width: 650rpx;
					height: 150rpx;
					background-color: #ededed;
					margin: 10rpx;
					border-radius: 100rpx;

				}

				.account {
					@extend %base;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
						margin-left: -40rpx;
						margin-right: 20rpx;
					}
				}

				.pwd {
					@extend %base;
					display: flex;
					justify-content: center;
					align-items: center;
					
					.i_put {
						height: 100rpx;
						width: 400rpx;
						font-size: 35rpx;
					}

					.icon {
						margin-right: -50rpx;

						&:active {
							transform: scale(0.9);
							transition: transform 0.1s;
						}
					}
				}
			}

			.button {
				border: 1rpx solid #54f8e0;
				width: 200rpx;
				height: 200rpx;
				margin-top: 30rpx;
				border-radius: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				position: fixed;
				top: 700rpx;

				&:active {
					transform: scale(0.9);
					transition: transform 0.1s;
				}

				.back {
					border: 1rpx solid rebeccapurple;
					position: absolute;
					width: 400rpx;
					height: 200rpx;
					background: linear-gradient(90deg, rgba(65, 254, 179, 1) 0%, rgba(38, 238, 244, 1) 50%, rgba(14, 130, 246, 1) 100%);

					animation: move 8s infinite linear alternate;

					@keyframes move {
						from {
							transform: translateX(100rpx);
						}

						to {
							transform: translateX(-100rpx);
						}
					}
				}

				.icon {
					position: fixed;
				}
			}
		}

		.botom {
			position: fixed;
			bottom: 50rpx;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-around;
			font-size: 25rpx;

			:active {
				transform: scale(0.9);
				transition: transform 0.1s;
			}
		}
	}
</style>